<template>
  <a-layout-header class="header">
    <div class="logo" />
    <a-menu
        v-model:selectedKeys="selectedKeys1"
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
    >
      <a-menu-item key="home">
        <router-link to="/">首页</router-link>
      </a-menu-item>
      <a-menu-item key="adminEbook">
        <router-link to="/adminEbook">电子书管理</router-link>
      </a-menu-item>
      <a-menu-item key="adminCategory">
        <router-link to="/adminCategory">分类管理</router-link>
      </a-menu-item>
      <a-menu-item key="adminUser">
        <router-link to="/adminUser">用户管理</router-link>
      </a-menu-item>
      <a-menu-item key="about">
        <router-link to="/about">关于</router-link>
      </a-menu-item>
      <a-menu-item key="login" style="margin-left: auto">
        <a @click="showLoginVisible" v-show="!user.id">Login</a>
        <span v-show="user.id">Hi~,{{user.name}}</span>
      </a-menu-item>
      <a-menu-item key="loginOut" v-if="user.id">
        <a @click="loginOut">loginOut</a>
      </a-menu-item>
    </a-menu>
  </a-layout-header>

  <a-modal
      v-model:visible="loginVisible"
      title="Login"
      @ok="loginHandleOk"
  >
    <p>
      <a-form :model="loginUser" :label-col="labelCol" :wrapper-col="wrapperCol">

        <a-form-item label="LoginUser loginName">
          <a-input v-model:value="loginUser.loginName" />
        </a-form-item>

        <a-form-item label="LoginUser Password">
          <a-input v-model:value="loginUser.password" />
        </a-form-item>

      </a-form>
    </p>
  </a-modal>

</template>

<script>
import { ref,computed } from 'vue'
import axios from "axios";
import {message} from "ant-design-vue";
import store from "@/store";
export default {
  name: "Header",
  setup(){
    const selectedKeys1 = ref(['home'])

    const user = computed(()=>store.state.user)
    const loginUser = ref({})
    const loginVisible = ref(false);
    const showLoginVisible=()=>{
      loginUser.value = {}
      loginVisible.value = true
    }
    const loginHandleOk = ()=>{
      console.log("loginHandleOk")

      loginUser.value.password = hexMd5(loginUser.value.password+KEY)

      axios.post("api/user/login",loginUser.value)
          .then(res => {
            console.log(res.data.code)

            if(res.data.code === "200"){
              loginVisible.value = false
              // user.value = res.data.data

              store.commit("setUser",res.data.data)

              message.success(res.data.msg);
            }else{
              message.error(res.data.msg);
            }
          })
    }

    const loginOut = ()=>{
      console.log("loginOut")

      loginUser.value.password = hexMd5(loginUser.value.password+KEY)

      axios.post("api/user/loginOut/"+user.value.token)
          .then(res => {
            console.log(res.data.code)
            if(res.data.code === "200"){
              store.commit("setUser",{})

              message.success(res.data.msg);
            }else{
              message.error(res.data.msg);
            }
          })
    }


    return{
      selectedKeys1,
      loginUser,
      loginVisible,
      user,
      labelCol: {
        style: {
          width: '150px',
        },
      },
      wrapperCol: {
        span: 14,
      },
      showLoginVisible,
      loginHandleOk,
      loginOut,
    }
  }
}
</script>

<style scoped>

</style>